<template>
	<s-layout :title="getLangValue(parameter.name+'-文档列表')">
		<view v-if="state.pagination.count > 0" class="ss-p-25">
			<view v-for="(item, index) in state.pagination.list" :key="index" class="ss-m-b-20" @tap.stop="to(item)">
				<view class="card">
					<view class="left">
						<uv-avatar :src="item.avatar" size="80" style="margin-bottom: 10rpx;"></uv-avatar>
						<view class="text">
							{{getLangValue('姓名')}}：{{getLangValue(item.username)}}
						</view>
						<view class="text">
							{{getLangValue('性别')}}：{{getLangValue(item.sex)}}
						</view>
						<view class="text">
							{{getLangValue('出生日期')}}：{{item.birthday}}
						</view>
				<!-- 		<view class="text">
							{{getLangValue('身高')}}：{{item.height}}CM
						</view>
						<view class="text">
							{{getLangValue('体重')}}：{{item.weight}}KG
						</view> -->
						<view class="text">
							{{getLangValue('学历')}}：{{getLangValue(item.education)}}
						</view>
						<view class="text" style="display: flex;" >
								<uv-icon name="map-fill" color="#fff" size="30rpx"></uv-icon> {{getLangValue(item.registered_residence)}}
						</view>
					<!-- 	<view class="text">
						{{getLangValue('现居地')}}：{{getLangValue(item.address)}}
						</view> -->
					<!-- 	<view class="text">
							{{getLangValue('当前状态')}}：{{getLangValue(item.onboarding_status)}}
						</view> -->
					</view>
					<view class="right">
						<view class="" style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
							
						<view class="">
								<!-- 申请工种 -->
								<view class="wrap">
									<view class="title">
										<view class="cn">
											{{getLangValue('申请工种')}}
										</view>
										<view class="en">
											CLASS
										</view>
									</view>
								<view class="content">
									<view class="text" >
											{{item.position.name || '无'}}
									</view>
								</view>
								</view>
								
								<!-- 工作经历 -->
								<view class="wrap">
									<view class="title">
										<view class="cn">
											{{getLangValue('工作经历')}}
										</view>
										<view class="en">
											WORK
										</view>
									</view>
									<scroll-view class="content" :scroll-y="true" style="height: 250rpx;">
										<view class="text" style="white-space: pre-line;">
										{{getLangValue(item.work_experience || '无')}}
										</view>
									</scroll-view>
								</view>
						</view>
						
						<!-- 人才库编码 -->
						<view class="wrap">
							<view class="title">
								<view class="cn">
									{{getLangValue('人才库编码')}}
								</view>
								<view class="en">
									ICH CODE
								</view>
							</view>
							<view class="content" style="padding: 0;padding-top: 10rpx;">
								<view class="text">
									{{item.id}}
								</view>
							</view>
						</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="state.pagination.count > 0" :status="state.loadStatus" :content-text="{
        contentdown: getLangValue('上拉加载更多'),
        contentrefresh: getLangValue('加载中'),
        contentnomore: getLangValue('没有更多'),
      }" @tap="loadmore" />
		<s-empty v-if="state.pagination.count === 0" :text="getLangValue('暂无数据')" />
		<uv-back-top :scroll-top="scrollTop"></uv-back-top>
	</s-layout>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import sheep from '@/sheep'
	import {
		formatDate
	} from '@/sheep/helper/formatTime'
	import {
		onShow,
		onReachBottom,
		onPullDownRefresh,
		onPageScroll,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		concat,
		cloneDeep,
		isEmpty
	} from 'lodash-es'
	import useLang from '@/sheep/hooks/useLang.js'
	const {
		getLangValue
	} = useLang()

	const pagination = {
		list: [],
		page: 1,
		count: 1,
		limit: 25
	}
	const scrollTop = ref(0)
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	const state = reactive({
		loadStatus: '',
		pagination: {
			list: [],
			page: 1,
			count: 1,
			limit: 25
		}
	})


	const to = (item) => {
		console.log('item', item)
	}



	const parameter = ref({})

	/** 查询列表 */
	const getList = async (page = 1, limit = 25) => {
		state.loadStatus = 'loading'
		const httpData = {
			page,
			limit,
			job_category_id: parameter.value.id
		}
		const res = await sheep.$api.dossier.dossierPage(httpData)
		if (page === 1) {
			state.pagination.list = []
		}
		if (res.status === 200) {
			let concatList = concat(state.pagination.list, res.data.list)
			state.pagination = {
				page,
				count: res.data?.count || 0,
				limit: limit,
				list: concatList
			}
			if (state.pagination.count > state.pagination.list.length) {
				state.loadStatus = 'more'
			} else {
				state.loadStatus = 'noMore'
			}
		} else {
			state.loadStatus = ''
		}
		console.log('state.pagination',state.pagination);
	}




	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			getList(state.pagination.page + 1)
		}
	}

	// 上拉加载
	onReachBottom(() => {
		loadmore()
	})

	// 下拉刷新
	onPullDownRefresh(() => {
		setTimeout(async () => {
			state.pagination = pagination
			await getList()
			uni.stopPullDownRefresh()
		}, 800)
	})

	onLoad(async (ops) => {
		parameter.value = ops
		await getList()
	})
	onShow(async () => {})
</script>

<style lang="scss" scoped>
	.card {
		display: flex;

		.left {
			height: auto;
			display: flex;
			flex-direction: column;
			background-color: #23594B;
			align-items: center;
			padding: 20rpx;
			width: 220rpx;

			.text {
				color: #fff;
				font-size: 30rpx;
				font-weight: 500;
				text-align: center;
				margin: 10rpx 0;
			}
		}

		.right {
			flex: 1;
			height: auto;
			padding: 20rpx;
			background-color: #fff;

			.wrap {
				padding: 10rpx 0;

				.title {
					display: flex;
					justify-content: space-between;
					border-bottom: 5rpx solid #CD7F32;

					.cn {
						font-size: 30rpx;
						font-weight: 800;
						color: #000;
					}

					.en {
						font-size: 25rpx;
						color: darkred;
						font-weight: 800;
					}
				}
				.content{
					padding: 20rpx 0;
					.text {
						color: #333;
						font-size: 30rpx;
						font-weight: 400;
					}
				}
			}
		}
	}
</style>